<!DOCTYPE html> 
<html> 
<head> 
	<title>쿠플</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<link rel="stylesheet" href="D:\dev\workspace\social-search\webapp/css/m/style.css" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script type="text/JavaScript" src="D:\dev\workspace\social-search\webapp/css/utils.js"></script>	
	<script type="text/JavaScript" src="D:\dev\workspace\social-search\webapp/css/curvycorners.js"></script>

	
</head> 

<body> 
	<div data-role="page" id="main"> 
		<div data-role="header" data-position="fixed">
			<form id="searchForm" name="searchForm" method="get" action="/search.html">
			<input type="hidden" id="page" name="page" value="1"/>
			<input type="hidden" id="mainMenuId" name="mainMenuId" value="${param.mainMenuId}"/>
			<input type="hidden" id="subMenuId" name="subMenuId" value="${param.subMenuId}"/>
			<input type="hidden" id="type" name="type" value="${condition.type}"/>
			<input type="hidden" id="order" name="order" value="${condition.order}"/>
			<!--
			<img src="http://m.couponplay.kr/image/home_m_01.png">
			-->
			<div data-role="fieldcontain">
			<span>
				<input style="width:70%;display:inline;background:#fff;" type="text" id="query" name="query" onclick="valueSelect(this)" value="" />
			</span>
			<span style="">
				<!--
				<img src='http://m.couponplay.kr/image/search_01.png' />
				<img src='http://m.couponplay.kr/image/category02.png' />
				-->
			</span>
			</div>	
			<span style="">
				<script>
					function showCategory() {
						//dimmed.on();
					    $('#categoryDiv').fadeIn(300);
					}
					
					function dimmedOff() {
						//dimmed.off();
						$('#categoryDiv').fadeOut(300);
						return false;
					}
				</script>
			</span>
		</form>
			
		</div>
		<div>
			<div data-role="navbar">
				<div data-role="fieldcontain" style="text-align:center;">
				    <fieldset data-role="controlgroup" data-type="horizontal" > 
			         	<input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
			         	<label for="radio-choice-21">구매순</label>
			         	<input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
			         	<label for="radio-choice-22">신상품순</label>
			         	<input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3"  />
			         	<label for="radio-choice-23">가격순</label>
			         	<input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4"  />
			         	<label for="radio-choice-24">할인율순</label>
			         	<input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-5"  />
			         	<label for="radio-choice-25">무료상품</label>
				    </fieldset>
				</div>
			</div>
			<div class="content-primary">	

			<ul data-role="listview">
				<li><a href="index.html">
						<img src="http://img1.coupangcdn.com/image/dd/98/47/25789847_c6ff8009-a6ce-4816-bf54-3d26bc6c2639.jpg"/>
						<h3>최강미러리스 니콘J1 줌더블렌즈킷</h3>
						<p>200원 110원 45%</p>
						<p>구매중 65,302개 / 2011-10-30까지</p>
					</a>
				</li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-hc.jpg" />
					<h3>Warning</h3>
					<p>Hot Chip</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-p.jpg" />
					<h3>Wolfgang Amadeus Phoenix</h3>
					<p>Phoenix</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-ok.jpg" />
					<h3>Of The Blue Colour Of The Sky</h3>
					<p>Ok Go</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-ws.jpg" />
					<h3>Elephant</h3>
					<p>The White Stripes</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-rh.jpg" />
					<h3>Kid A</h3>
					<p>Radiohead</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-xx.jpg" />
					<h3>XX</h3>
					<p>XX</p>
				</a></li>
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-mg.jpg" />
					<h3>Congratulations</h3>
					<p>MGMT</p>
				</a></li>
				
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-ag.jpg" />
					<h3>Ashes Grammar</h3>
					<p>A Sunny Day in Glasgow</p>
				</a></li>
				
				<li><a href="index.html">
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-k.jpg" />
					<h3>Hot Fuss</h3>
					<p>Killers</p>
				</a></li>
				<li><a href="index.html">	
					<img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-af.jpg" />
					<h3>The Suburbs</h3>
					<p>Arcade Fire</p>
				</a></li>
			</ul>
			</div><!--/content-primary -->					
				
		</div> 
		<div data-role="footer" data-position="fixed">
	<style>	
		.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 30px !important; }
		.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
		#chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
		#email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
		#login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
		#beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
		#coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
		#skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
	
	<div data-role="footer" class="nav-glyphish-example">
		<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
		<ul>
			<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
			<li><a href="#" id="email" data-icon="custom">Email</a></li>
			<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
			<li><a href="#" id="beer" data-icon="custom">Beer</a></li>
			<li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
		</ul>
		</div>
	</div>
		</div>
	</div>
			<style>
.ui-li-heading {
    font-size: 13px;
}			
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding:0;
}
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
    padding-left: 125px;
}

.ui-li-thumb, .ui-listview .ui-li-icon {
    max-width: 120px;
    max-height:60px;
}

.ui-li-desc {
    margin: 0;
}
			</style>	
</body>
</html>